Jassif Team Institution

AngularJS AJAX - $http

$http হল AngularJS দ্বারা প্রদত্ত একটি পরিষেবা যা দূরবর্তী ডেটা সার্ভার থেকে ডেটা পড়ার জন্য।

AngularJS $http

AngularJS $http পরিষেবা সার্ভারে একটি অনুরোধ পাঠায় এবং একটি প্রতিক্রিয়া প্রদান করে।

উদাহরণ

সার্ভারে একটি সাধারণ অনুরোধ পাঠান এবং হেডারে ফলাফল প্রদর্শন করুন:

<div ng-app="myApp" ng-controller="myCtrl">৷ <p>আজকের স্বাগত বার্তা:</p> <h1>{{myWelcome}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', ফাংশন($স্কোপ, $http) { $http.get("welcome.htm") তারপর (ফাংশন(প্রতিক্রিয়া) { $scope.myWelcome = response.data; }); }); </script>

পদ্ধতি

উপরের উদাহরণটি $http পরিষেবার .get পদ্ধতি ব্যবহার করে।

.get পদ্ধতি হল $http পরিষেবার সংক্ষিপ্ত বিবরণ।

বেশ কয়েকটি সংক্ষিপ্ত পদ্ধতি রয়েছে:

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

উপরের সমস্ত পদ্ধতি হল $http পরিষেবাতে কল করার শর্টকাট:

উদাহরণ

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
    url : "welcome.htm"
  }).then(function mySuccess(response) {
    $scope.myWelcome = response.data;
  }, function myError(response) {
    $scope.myWelcome = response.statusText;
  });
});

উপরের উদাহরণটি একটি আর্গুমেন্ট হিসাবে একটি বস্তু ব্যবহার করে $http পরিষেবাকে আহ্বান করে।

এই অবজেক্টটি HTTP পদ্ধতি, URL, সাফল্যে কী করতে হবে এবং ব্যর্থতার ক্ষেত্রে কী করতে হবে তা নির্দিষ্ট করে।

বৈশিষ্ট্য

সার্ভার থেকে প্রতিক্রিয়া নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু:

• .config- অনুরোধ তৈরি করতে ব্যবহৃত বস্তু
• .data- সার্ভার থেকে প্রতিক্রিয়া ধারণকারী একটি স্ট্রিং বা বস্তু
• .headers- হেডার তথ্য পেতে ব্যবহার করার ফাংশন
• .status- HTTP অবস্থা সংজ্ঞায়িত একটি সংখ্যা
• .statusText- HTTP অবস্থা সংজ্ঞায়িত একটি স্ট্রিং

উদাহরণ

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.content = response.data;
    $scope.statuscode = response.status;
    $scope.statustext = response.statusText;
  });
});

ত্রুটিগুলি পরিচালনা করতে, .then পদ্ধতিতে আরও একটি ফাংশন যোগ করুন:

উদাহরণ

var app = angular.module('myApp', []); app.controller('myCtrl', ফাংশন($স্কোপ, $http) { $http.get("wrongfilename.htm") তারপর (ফাংশন(প্রতিক্রিয়া) { // প্রথম ফাংশন সাফল্য পরিচালনা করে $scope.content = response.data; }, ফাংশন(প্রতিক্রিয়া) { // দ্বিতীয় ফাংশন ত্রুটি পরিচালনা করে $scope.content = "কিছু ভুল হয়েছে"; }); });

JSON

প্রতিক্রিয়া থেকে প্রাপ্ত ডেটা JSON ফর্ম্যাটে হবে বলে আশা করা হচ্ছে।

JSON ডেটা পরিবহনের একটি দুর্দান্ত উপায় এবং AngularJS বা অন্য কোনো JavaScript এ ব্যবহার করা সহজ।

উদাহরণ:

সার্ভারে একটি ফাইল রয়েছে যা একটি JSON অবজেক্ট রিটার্ন করে যার মধ্যে 15 জন গ্রাহক রয়েছে, সবগুলোই রেকর্ড নামক অ্যারেতে মোড়ানো।

JSON অবজেক্ট দেখতে এখানে ক্লিক করুন।

উদাহরণ

একটি অ্যারের মাধ্যমে লুপ করার জন্য ng-রিপিট নির্দেশনাটি দুর্দান্ত:

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php").then(function(response) {
    $scope.myData = response.data.records;
  });
});
</script>

অনুশীলন করুন

নীচের অনুশীলনে $http পরিষেবা সম্পর্কে আপনার বোঝার পরীক্ষা করুন: